<template>
    <div>
        <div class="table">
            <ul>
                <li @click="tab(1)">
                    <router-link to="/homeView" tag="a">
                        <div class="icon">
                            <span  :class="['iconfont',{'icon-shouye':nums!=1},{'icon-shouye1':nums==1}]"></span>
                        </div>
                        <p>首页</p>
                    </router-link>
                </li>
                <li @click="tab(2)">
                    <router-link to="/classRoomView" tag="a">
                        <div class="icon">
                            <span :class="['iconfont',{'icon-ketang':nums!=2},{'icon-ketang1':nums==2}]"></span>
                        </div>
                        <p>课堂</p>
                    </router-link>
                </li>
                <li>
                    <a @click="toEstablishView">
                        <div class="add-to">
                            <span class="iconfont icon-tianjia" style="color:white;"></span>
                        </div>
                    </a>
                </li>
                <li @click="tab(4)">
                    <router-link to="/collectionView" tag="a">
                        <div class="icon">
                            <span :class="['iconfont',{'icon-shoucang':nums!=4},{'icon-shoucang1':nums==4}]"></span>
                        </div>
                        <p>收藏</p>
                    </router-link>
                </li>
                <li @click="tab(5)">
                    <router-link to="/PersonalView" tag="a">
                        <div class="icon">
                            <span :class="['iconfont',{'icon-wo':nums!=5},{'icon-my':nums==5}]"></span>
                        </div>
                        <p>我</p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:"tableData",
        data() {
            return {
                nums:1
            };
        },
        methods:{
            tab(num){
                this.nums=num
            },
            toEstablishView(){
                this.$emit("toEstablishView")
                this.$router.push("/establishView")
            }
        }
    }
</script>

<style>
.table {
    height: 60px;
    position: fixed;
    background-color: white;
    bottom: 0;
    width: 100%;
}

.table ul {
    display: flex;
    justify-content: space-between;
}
.table ul li{
    width: 20%;
    height: 40px;
    padding: 10px 0;
    text-align: center;
}
.table ul li .icon span{
    font-size: 25px;
}
.table ul li .add-to span{
    font-size: 25px;
}
.table ul li p{
    font-size: 12px;
}
.table ul li .add-to{
    padding: 8px 0;
    width: 43px;
    height: 24px;
    margin: 0 auto;
    background-color: #f96650;
    border-radius: 10px;
}
</style>